<template>
	<div>
		<div class="live" style="">

		</div>
		<wuc-tab :tab-list="tabList" textFlex :tabCur.sync="TabCur" tab-class="text-center text-black bg-white" select-class="text-white bg-orange"
		 @change="tabChange"></wuc-tab>
		<div class="padding  text-center text-black">
			<zhiyi-answer :dataObj="answerData" :textValue="myanswer"  @myAnswerHandler="myAnswerChange" v-if="curType=='zhiyi-answer'"></zhiyi-answer>
			<zhiyi-pending-approval :dataObj="answerData" :pingyuValue = "daipi_pingyu" :fenshuValue="daipi_fenshu"   @pingyuHandler="pingyuChange"   @fenshuHandler="fenshuChange"  @daipitijiaoHandler="daipitijiaoBtn"  v-if="curType=='zhiyi-pending-approval'"></zhiyi-pending-approval>
			<!-- <zhiyi-white-broad v-if="curType=='zhiyi-white-broad'" :docSrc="docSrc"></zhiyi-white-broad> -->
			<view v-if="curType=='zhiyi-white-broad'">
				
			</view>
			<zhiyi-solution :dataObj="answerData" v-if="curType=='zhiyi-solution'"></zhiyi-solution>
			<view v-if="curType=='zhiyi-interaction'">
				<!-- <web-view  :src="chatSrc"></web-view> -->
			</view>
			<!-- <zhiyi-interaction  v-if="curType=='zhiyi-interaction'" :chatSrc="chatSrc"></zhiyi-interaction> -->
			
			<uni-popup ref="popup" type="bottom" :maskClick="false">
				<view class="uni-list">
					<view>{{daojishi}}秒后关闭</view>
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" >
							<view>
								<radio value="1" checked="true" />我想被批改
							</view>
						</label>
						<label class="uni-list-cell uni-list-cell-pd" >
							<view>
								<radio value="0"/>不想被批改
							</view>
						</label>
						
					</radio-group>
					<button type="primary" @click="jiaojuanBtn">提交</button>
					
				</view>
			</uni-popup>

		</div>
	</div>
</template>
<script>
	import Utils from '@/common/util.js';
	
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import ZhiyiAnswer from '@/components-zhiyi/zhiyi-answer/zhiyi-answer.vue';
	import ZhiyiPendingApproval from '@/components-zhiyi/zhiyi-pending-approval/zhiyi-pending-approval.vue';
	// import ZhiyiWhiteBroad from '@/components-zhiyi/zhiyi-white-broad/zhiyi-white-broad.vue';
	import ZhiyiSolution from '@/components-zhiyi/zhiyi-solution/zhiyi-solution.vue';
	// import ZhiyiInteraction from '@/components-zhiyi/zhiyi-interaction/zhiyi-interaction.vue';
	

	import subjectiveLiveApi from '@/api/subjectiveLive.js'
	let _this, getShiTiInfoInterval,startCountDownInterval
	export default {
		components: {
			WucTab,
			uniPopup,
			ZhiyiAnswer,
			ZhiyiPendingApproval,
			// ZhiyiWhiteBroad,
			ZhiyiSolution,
			// ZhiyiInteraction
			
		},
		onLoad(query) {
			_this = this;
			_this.initData(query)
		},
		onHide() {
			console.log('onHide')
			clearInterval(getShiTiInfoInterval)
		},
		onUnload(){
			console.log('onUnload')
			clearInterval(getShiTiInfoInterval)
			
		},
		data() {
			return {
				videoWV:null,
				docWV:null,
				chatWV:null,
				daan:{},//答案
				daipi_tijiao_status:false,//
				daipi_pingyu:'',//待批评语
				daipi_fenshu:'',//待批分数
				daipi:{},
				dt_id:'',//回答返回的id
				myanswer:'',//我的回答
				daojishi:5,//倒计时5s
				needPingFen:"1",//需要批改
				countdowntime:'',//做题倒计时
				broadstatus:'',//状态
				ti: {
					answer: '', //标准答案
					broadstatus: '', //试题状态
					countdowntime: '', //倒计时
					miningpoint: '', //评分点
					questionsname: '', //试题
					questionsid: '', //试题id
				},
				broadstaustid: '',//id
				usercode: '',//
				userid: '',//
				roomid: '',//
				name: '',//
				showLive: false,
				videoSrc: '',
				docSrc: '',
				chatSrc: '',
				tabList: [{
						name: '答题',
						type: 'zhiyi-answer',
						// icon: 'cuIcon-comment'
					},
					{
						name: '待批',
						type: 'zhiyi-pending-approval',
						// icon: 'cuIcon-dianhua',
						disabled: true
					},
					{
						name: '白板',
						type: 'zhiyi-white-broad',
						// icon: 'cuIcon-wifi'
					},
					{
						name: '答案',
						type: 'zhiyi-solution',
						// icon: 'cuIcon-wifi'
						disabled: true
					},
					{
						name: '互动',
						type: 'zhiyi-interaction',
						// icon: 'cuIcon-wifi'
					},

				],
				TabCur: 0,
				curType: 'zhiyi-answer',
				answerData: {
					countDownStr:'',//定时
					ti:{},//题
					textDisabled:true,
					daipiDisabled:false,
					daipi:{},
					daan:{},
					needPingFen:''
				}
			};
		},

		computed: {
			
		},
		watch: {
			curType:{
				handler(curVal,oldVal){
					if(curVal=='zhiyi-answer'){
						_this.hideWebView(_this.docWV)
						_this.hideWebView(_this.chatWV)
					}
					if(curVal=='zhiyi-pending-approval'){
						_this.hideWebView(_this.chatWV)
						_this.hideWebView(_this.docWV)
					}
					if(curVal=='zhiyi-white-broad'){
						_this.showWebView(_this.docWV)
						_this.hideWebView(_this.chatWV)
					}
					if(curVal=='zhiyi-solution'){
						_this.hideWebView(_this.chatWV)
						_this.hideWebView(_this.docWV)
					}
					if(curVal=='zhiyi-interaction'){
						_this.hideWebView(_this.docWV)
						_this.showWebView(_this.chatWV)
					}
				}
			},
			ti:{
				handler(curVal,oldVal){
					_this.answerData.ti = curVal
				},
				deep:true,
				// immediate:true
			},
			daan:{
				handler(curVal,oldVal){
					_this.answerData.daan = curVal
				},
				deep:true,
				// immediate:true
			},
			daipi:{
				handler(curVal,oldVal){
					_this.answerData.daipi = curVal
				},
				deep:true,
				// immediate:true
			},
			needPingFen:{
				handler(curVal,oldVal){
					_this.answerData.needPingFen = curVal
				}
			},
			broadstatus: {
				handler(curVal, oldVal) {
					if(curVal=='0'){
						//等待答题
						//输入框禁止
						_this.answerData.textDisabled=true
						//待批，答案 禁止
						_this.tabList[1].disabled = true
						_this.tabList[3].disabled = true
					}
					if(curVal=='1'){
						//开始答题
						//开始计时
						_this.startCountDown()
						//输入框允许
						_this.answerData.textDisabled=false
						//待批，答案 禁止
						_this.tabList[1].disabled = true
						_this.tabList[3].disabled = true
					}
					if(curVal=='2'){
						//结束答题
						//计时器停止
						clearInterval(startCountDownInterval)
						//输入框禁止
						_this.answerData.textDisabled=true
						//显示选择框， 5秒后提交答案
						//待批，答案 禁止
						_this.tabList[1].disabled = true
						_this.tabList[3].disabled = true
						
						
						//显示并交卷
						_this.jiaojuan()
					}
					if(curVal=='3'){
						//交叉批改
						
						//计时器停止
						clearInterval(startCountDownInterval)
						//输入框禁止
						_this.answerData.textDisabled=true
						//是否需要批改
						//待批禁止，答案显示
						//待批，答案 显示
						if(_this.needPingFen=="1"){
							_this.tabList[1].disabled = false
							_this.tabList[3].disabled = false
						}else{
							_this.tabList[1].disabled = true
							_this.tabList[3].disabled = false
						}
						_this.getJiaochapigaiInfo()
					}
					if(curVal=='4'){
						//结束批改
						//计时器停止
						clearInterval(startCountDownInterval)
						//输入框禁止
						_this.answerData.textDisabled=true
						//待批 禁止，答案 显示
						_this.tabList[1].disabled = true
						_this.tabList[3].disabled = false
						//提交批改
						_this.daipitijiao()
						
						_this.getDaTiInfo()
					}
				},
				// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
				immediate: true,
				deep: true
			},
			countdowntime:{
				handler(curVal,oldVal){
					var flag = ""
					if (curVal < 0) {
						flag = "-"
						curVal = Math.abs(curVal)
					}
					var second = Math.floor(curVal % 60); // 计算秒     
					var minite = Math.floor((curVal / 60) % 60); //计算分 
					var hour = Math.floor((curVal / 3600) % 24); //计算小时
					// 小时 ,分 秒 
					hour = hour < 10 ? "0" + hour : hour
					minite = minite < 10 ? "0" + minite : minite
					second = second < 10 ? "0" + second : second,
					// console.log(hour, minite, second)
					_this.answerData.countDownStr = flag + " " + hour + ":" + minite + ":" + second
				
				}
			} 
		},
		methods: {
			getDaTiInfo(){
				//获取评语，评分信息
				subjectiveLiveApi.dt_info({dt_id:_this.ti.questionsid}).then(res=>{
					// console.log(res)
					_this.daan = res.data
				})
				
			},
			daipitijiaoBtn(){
				//待批btn
				// _this.daipi_tijiao_status = true;
				_this.answerData.daipiDisabled=true
				console.log(_this.answerData.daipiDisabled)
			},
			daipitijiao(){
				subjectiveLiveApi.pf_zgzb({
					usercode:_this.usercode,
					questionsid:_this.ti.questionsid,
					comment:_this.daipi_pingyu,
					commenorid:_this.daipi.commenorid,
					comrname:_this.daipi.comrname,
					score:_this.daipi_fenshu,
					commenttime:Utils.getCurDate(),
					broadstaustid:_this.broadstaustid}).then(res=>{
					// console.log(res)
					
				})
			},
			pingyuChange(value){
				console.log(value)
				_this.daipi_pingyu = value
				
			},
			fenshuChange(value){
				console.log(value)
				_this.daipi_fenshu = value
			},
			getJiaochapigaiInfo(){
				subjectiveLiveApi.stpg_byuser({usercode:_this.usercode,	broadstaustid:_this.broadstaustid}).then(res=>{
					console.log(res)
					_this.daipi  = res.data
					// _this.answerData.daipi = res.data
				})
			},
			myAnswerChange(value){
				console.log(value)
				_this.myanswer = value
			},
			radioChange(evt){
				// console.log(evt)
				_this.needPingFen =  evt.detail.value
				
			},
			jiaojuanBtn(){
				_this.$refs.popup.close()
			},
			jiaojuan(){
				setInterval(function(){
					_this.daojishi = _this.daojishi -1
				},1000)
				
				//打开弹层，选择是否进行批改，5s后关闭
			   _this.$refs.popup.open()
			   setTimeout(function(){
				  _this.$refs.popup.close()
				  // console.log('调接口')
				  //调接口
				  // 提交答题接口
				  subjectiveLiveApi.dt_tjsj({
					usercode:_this.usercode,
					questionsid:_this.ti.questionsid,
					questionsname:_this.ti.questionsname,
					myanswer:_this.myanswer,
					answertime:Utils.getCurDate(),
					isorctype:_this.needPingFen,
					spendtime:_this.ti.countdowntime - _this.countdowntime,
					source:1,
					broadstaustid:_this.broadstaustid}).then(res=>{
					  console.log(res)
					  _this.dt_id = res.data.dt_id
				  })
			   },5000)
			},
			startCountDown(){
				startCountDownInterval = setInterval(function(){
					_this.countdowntime = _this.countdowntime -1
				},1000)
			},
			createWebView(src,top=444,height="200px"){
				// #ifdef APP-PLUS
				let WV;
				WV = plus.webview.create("", "custom-webview", {
					plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
					top: uni.getSystemInfoSync().statusBarHeight + top, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
					height: height
				})
				WV.loadURL(src)
				var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
				currentWebview.append(WV); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
				
				setTimeout(function() {
					console.log(WV.getStyle())
				}, 1000); //如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
				_this.hideWebView(WV)
				return WV;
				// #endif
			},
			showWebView(WV){
				// #ifdef APP-PLUS
				WV.show()
				// #endif
			},
			hideWebView(WV){
				// #ifdef APP-PLUS			
				WV.hide()
				// #endif
			},
			 

			getShiTiInfo() {
				subjectiveLiveApi.zb_dqt({
					broadstaustid: _this.broadstaustid
				}).then(res => {
					// console.log(res)
					console.log('broadstatus',res.data.broadstatus)
					if (null == res) {
						return
					}
					if (_this.ti.broadstatus == res.data.broadstatus) {
						console.log('不改变状态返回')
						return;
					}
					_this.ti = res.data
					_this.countdowntime=_this.ti.countdowntime
					_this.broadstatus=_this.ti.broadstatus
					// _this.answerData.ti = _this.ti
					// _this.startCountDown()
					console.log(_this.ti)
				})
			},
			initData(query) {
				let {
					id
				} = query
				let {
					usercode,
					userxm
				} = uni.getStorageSync('user')
				_this.usercode = usercode
				_this.name = userxm
				console.log('=========================================userxm',userxm)
				//获取详情信息
				subjectiveLiveApi.zgzb_info({
					id: id,
					usercode: _this.usercode
				}).then(res => {
					// console.log(res)
					_this.userid = res.data.Userid
					_this.roomid = res.data.zbj_info.broadcasturl
					_this.broadstaustid = res.data.broadstaustid
					_this.showLive = true
					_this.videoSrc =`http://49.4.68.157/html/components/video.html?userid=${_this.userid}&roomid=${_this.roomid}&name=${_this.name}`
					_this.docSrc   = `http://49.4.68.157/html/components/doc.html?userid=${_this.userid}&roomid=${_this.roomid}&name=${_this.name}`
					_this.chatSrc  = `http://49.4.68.157/html/components/chat.html?userid=${_this.userid}&roomid=${_this.roomid}&name=${_this.name}`
					//
					_this.videoWV =  _this.createWebView(_this.videoSrc,44,"250px")
					// console.log(_this.videoWV)
					_this.docWV =  _this.createWebView(_this.docSrc,400,"300px")
					_this.chatWV =  _this.createWebView(_this.chatSrc,400,"300px")
					// _this.createVideoWebView()
					// _this.createDocWebView()
					// _this.docWV.hide()
					
					_this.showWebView(_this.videoWV)
					// _this.showWebView(_this.docWV)
					_this.getShiTiInfo()
					getShiTiInfoInterval = setInterval(() => {
						_this.getShiTiInfo()
					}, 5000)

				}).catch(err => {
					_this.showLive = false
					console.log(err)
					uni.showToast({
						icon: 'none',
						title: err.msg
					})
				})
			},
			tabChange(index) {
				_this.TabCur = index;
				// console.log(this.TabCur)
				_this.curType = _this.tabList[index].type
				// _this.tabList[1].disabled = false
				// console.log(this.tabList)
				// this.answerData.countDown.startCountDown = true
			},
		},

		onReady() {}
	};
</script>
<style>
	div,
	scroll-view,
	swiper {
		box-sizing: border-box;
	}

	div {
		font-size: 28upx;
		background-color: #f1f1f1;
	}

	.live {
		width: 100%;
		height: 500upx;
	}

	.swiper {
		height: 140upx;
	}

	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}

	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;
		background-color: #ffffff;
	}

	.cu-bar .action:first-child {
		margin-left: 30upx;
		font-size: 30upx;
	}

	.solid,
	.solid-bottom {
		position: relative;
	}

	.solid::after,
	.solid-bottom::after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: inherit;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
	}

	.solid::after {
		border: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.solid-bottom::after {
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.text-orange {
		color: #f37b1d
	}

	.text-white {
		color: #ffffff
	}

	.text-black {
		color: #333333;
	}

	.bg-white {
		background-color: #ffffff;
	}

	.bg-orange {
		background-color: #f37b1d;
	}

	.padding {
		padding: 30upx;
	}

	.margin {
		margin: 30upx;
	}

	.margin-top {
		margin-top: 30upx;
	}

	.text-center {
		text-align: center;
	}
</style>
